import './App.css';
import React, { Component, lazy, Suspense } from 'react';
import { Route, Redirect, Switch } from 'react-router-dom'
import Loading from './components/Loading'
// 懒加载组件，用户访问时加载
var Search = lazy(() => import('./views/Search'))
var Notfound = lazy(() => import('./views/Notfound'))
var Login = lazy(() => import('./views/Login'))
var Register = lazy(() => import('./views/Register'))
var Index = lazy(() => import('./views/Index'))
var Detail = lazy(() => import('./views/Detail'))
var Collection = lazy(() => import('./views/Collection'))
class App extends Component {
  render() {
    return (
      <div className='app'>
        {/* 定义一级路由规则 */}
        <Suspense>
          <Switch>
            <Route  path='/index' component={Index} />
            <Route exact path='/search' component={Search} />
            <Route exact path='/login' component={Login} />
            <Route exact path='/register' component={Register} />
            <Route exact path='/detail' component={Detail} />
            <Route exact path='/collection' component={Collection} />
            {/* 重定向 */}
            <Redirect exact from='/' to='/index' />
            <Route exact path='*' component={Notfound} />
          </Switch>
        </Suspense>
      </div>
    );
  }
}

export default App;
